<template>
    <!-- 可以有多个根元素 -->

    <!-- 4. template自动解套，不需要.value -->
    <div>{{ money }}</div>
    <button @click="add">点我加工资</button>
</template>
  
  <script>
  /* 
  1. 先引进 ref
  2. 调用 ref ，变成响应式数据
  3. ref调用的话，在 script 里面需要 .value 
  4. template自动解套，不需要.value 
  */
  
  // 1.引进方法
  import { ref } from 'vue';
  export default {
      setup() {
          // 2调用ref方法，把需要转成响应式的数据传递过去
          let money = ref(10000)
          console.log('money -----> ', money);
  
          const add = () => {
              // 3. ref调用的话，在 script 里面需要 .value 
              money.value += 1000
          }
  
          //   template需用使用数据，就return出去
          return {
              money, add
          }
      },
  }
  </script>
  